<template>
  <div class="b-dialog-application__header flex items-center relative ">
    <div class="b-dialog-application__header-img">
      <img :src="url"
           v-if="url"
           class="w-full h-full"
           alt="">
    </div>

    <div class="b-dialog-application__header-content flex flex-col items-start flex-1">
      <div class="b-dialog-application__header-content__top w-full flex justify-between items-center">
        <ZTooltip :content="title">
          <span>{{title}}</span>
        </ZTooltip>

        <div class="b-dialog-application__header-content__top-action flex  items-center">
          <ZHelp />
          <ZIcon icon="el-icon-close"
                 class="cursor-pointer"
                 color="#000000"
                 @click.native="$emit('close')" />
        </div>

      </div>
      <div class="b-dialog-application__header-content__bottom">
        <slot name="desc">
          <ZTooltip :content="desc"
                    :line="3">
            <span>{{desc}}</span>
          </ZTooltip>
        </slot>

      </div>
    </div>
  </div>
</template>

<script>
import ZTooltip from '@/components/storybook/z-tooltip'
import ZIcon from '@/components/storybook/z-icon'
import ZHelp from '@/components/storybook/z-help'

export default {
  name: 'BDialogApplicationHeader',
  components: {
    ZTooltip,
    ZIcon,
    ZHelp
  },
  props: {
    title: String,
    desc: String,
    src: String
  },
  computed: {
    url () {
      return this.src ? this.src : this.$ossLink + '/bots/apps/1458322876309573632.png'
    }

  }
}
</script>

<style lang="scss" scoped>
.b-dialog-application__header {
  margin-bottom: 16px;
  box-shadow: inset 0px -1px 0px 0px #f0f0f0;
  height: 136px;
  &-img {
    width: 104px;
    height: 104px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    padding: 8px;
    margin-right: 16px;
    flex-shrink: 0;
  }
  &-content {
    height: 104px;
    &__top {
      font-size: 24px;
      font-weight: bold;
      color: #161616;

      &-action {
        .z-icon {
          margin-left: 18px;
        }
      }
    }
    &__bottom {
      font-size: 14px;
      color: #808080;
      line-height: 20px;
    }
  }
}
</style>
